<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编程框</title>
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script src="{% static 'js/jquery.cookie.js' %}"></script>
    <style>
        .edit{

        }
    </style>
    <script>
        $(
            function(){
                $(".edit").click(
                    function () {
                        // 该方法主要是创建文本框和保存按钮
                        // 获取span标签中的值
                        span = $(this).prev();
                        span_value = span.html();
                        // 创建文本框，并赋值
                        input_area = $(document.createElement("textarea"));
                        input_area.val(span_value);
                        $(this).before(input_area);
                        // 创建 save 按钮
                        $(this).before("<a href='#' class='btn btn-white btn-sm save' ><i class='fa fa-pencil'></i>SAVE</a>");
                        // 隐藏 span 和 edit
                        span.hide();
                        $(this).hide();
                        return false;
                    }
                );
                $(document).delegate(".save",'click',function(){
                    //该方法主要是为了处理数据保存业务
                    //获取文本框中的值
                    text_area = $(this).prev();
                    text_area_val = text_area.val();
                    // 声明一个save按钮，用于业务逻辑中的删除
                    save = $(this);
                    //获取隐藏 span 和 edit标签
                    span = $(this).prevAll('span');
                    edit = $(this).next();

                    if (confirm("确定提交数据")){
                        // 如果确定提交 则发数据，如果发送成功删除 text-area 和 save
                        // 显示 span 和 edit
                        $.ajax({
                            url:"http://127.0.0.1:8000/post_data/",
                            data:{"text":text_area_val},//要包含id 和 新填写的信息
                            type:"POST",
                            dataType:'json',
                            headers:{"X-CSRFToken":$.cookie("csrftoken")},
                            success:function(data){
                                console.log("请求成功",console.log(data.status))
                                if (data.status == 200){
                                    // 业务处理成功，则更新页面数据
                                    console.log("相关的业务逻辑...");//此处可以添加相关业务逻辑
                                    // 删除save
                                    save.remove();
                                    // 删除 text-area
                                    text_area.remove();
                                    // 更新span内容，并显示
                                    span.text(text_area_val);
                                    span.show();
                                    // 显示edit内容
                                    edit.show();
                                }else{
                                    // 业务处理失败则还原相关数据
                                    alert("保存失败");
                                    span.show();
                                    edit.show();
                                    text_area.remove();
                                    $(save).remove()
                                }
                             },
                            error:function(){
                                    console.log("请求失败");
                                    // 没有成功发送，则显示span 和 edit，去除 text-area 和 save 标签
                                    span.show();
                                    edit.show();
                                    text_area.remove();
                                    $(save).remove();
                            }
                        })
                    }else{
                        // 如果不发送数据，则显示span 和 edit，去除 text-area 和 save 标签
                        span.show();
                        edit.show();
                        text_area.remove();
                        $(save).remove();
                    }
                })
            }
        )
    </script>
</head>
<body>
<div>
    <table>
        <tbody>
            <tr>
                <td class="slave-actions">
                    <span>88888</span>
                    <a href="#" class="btn btn-white btn-sm edit" ><i class="fa fa-pencil"></i>edit</a>
                    <a href="#" class="btn btn-white btn-sm add"><i class=""fa fa-pencil"></i>Add New Task</a>
                </td>
            </tr>            <tr>
                <td class="slave-actions">
                    <span>9999</span>
                    <a href="#" class="btn btn-white btn-sm edit" ><i class="fa fa-pencil"></i>edit</a>
                    <a href="#" class="btn btn-white btn-sm add "><i class="fa fa-pencil"></i>Add New Task</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>